<template>
  <div class="my-input" :class="[suffixIcon?'my-input--suffix':'']">
    <input
      class="my-input__inner"
      :class="[{disabled}]"
      :placeholder="placeholder"
      :disabled="disabled"
      :readonly="readonly"
      :value="value"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      :type="password?'password':'text'"
    />
    <span v-if="suffixIcon" class="my-input__suffix">
      <i :class="`my-input__icon my-icon-${suffixIcon}`"></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "MyInput",
  props: {
    value: String | Number,
    placeholder: String,
    disabled: Boolean,
    readonly: Boolean,
    password: Boolean,
    suffixIcon: String,
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    handleFocus(e) {
      this.$emit("focus", e);
    },
    handleBlur(e) {
      this.$emit("blur", e);
    },
  },
};
</script>

<style lang="scss">
.my-input {
  box-sizing: border-box;
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}

.my-input--suffix .my-input__inner {
  padding-right: 30px;
}

.my-input__inner {
  width: 100%;
  display: inline-block;
  padding: 0 16px;
  font-size: inherit;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  color: #181c32;
  background-color: #fff;
  border: 1px solid #e4e6ef;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 4px;
  outline: none;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  box-sizing: border-box;
  cursor: pointer;

  &:focus {
    border: 1px solid #00b2ff;
  }

  &::-webkit-input-placeholder {
    color: #a1a5b7;
  }

  &:-moz-placeholder {
    color: #a1a5b7;
  }

  &::-moz-placeholder {
    color: #a1a5b7;
  }

  &:-ms-input-placeholder {
    color: #a1a5b7;
  }

  &::-ms-clear,
  &::-ms-reveal {
    display: none;
  }

  &.disabled {
    cursor: not-allowed;
    background-color: #f5f8fa;
  }
}

.my-input__suffix {
  position: absolute;
  height: 100%;
  right: 5px;
  top: 0;
}
.my-input__icon {
  width: 25px;
  line-height: 40px;
  text-align: center;
  font-size: 12px;
  color: #b5b5c3;
}
</style>